{{ 'collage.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}

<link rel="stylesheet" href="{{ 'component-deferred-media.css' | asset_url }}" media="print" onload="this.media='all'">

<div class="video-tag">
  <div class="video-section {% unless section.settings.full_width %} page-width{% endunless %}">
    <div{% if section.settings.full_width %} class="page-width"{% endif %}>
        <h2 class="title">
          <span>{{ section.settings.heading }}</span>
        </h2>
    </div>
    <div class="swiper-container swiper tag-video-loop">
        <div class="tenways-video swiper-wrapper">
            {%- for block in section.blocks -%}
    
            <div class="video collage-card collage-video swiper-slide" {{ block.shopify_attributes }}>
               <div class="video-list">
              

               <div class="iframe_video iframe-container">
                {% if block.settings.iframe_video != blank %}
                   {{ block.settings.iframe_video }}
                {%- endif -%} 
              </div>

               </div>
              </div>
            {%- endfor -%}
            
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next">{% render 'swiper-next' %}</div>
        <div class="swiper-button-prev">{% render 'swiper-prev' %}</div>
    </div>
    {%- if section.settings.button_label != blank -%}
    <div class="video_url center">  
        <a class="button--primary"{% if section.settings.button_link == blank %} aria-disabled="true" role="link"{% else %} href="{{ section.settings.button_link }}"{% endif %}>
          {{ section.settings.button_label | escape }}
        </a> 
    </div>
    {%- endif-%}
  </div>
</div>



<script>
    var swiper = new Swiper('.tag-video-loop', {
        speed: 600,
        loop:true,
        centeredSlides: true,
        observeParents:true,//修改swiper的父元素时，自动初始化swiper
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        breakpoints: {
      320: {
        slidesPerView: 1,
        spaceBetween: 20,
      },
      375: {
        slidesPerView: 1,
        spaceBetween: 20,
      },
      750: {
        slidesPerView: 1,
        spaceBetween: 20,
      },
      768: {
        slidesPerView: 1.2,
        spaceBetween: 10,
      },
      1280: {
        slidesPerView: 1.5,
        spaceBetween: 10,
      },
      1440: {
        slidesPerView: 1.5,
        spaceBetween: 10,
      }
    }
      });
</script>

{% schema %}
{
  "name": "Video loop tag",
  "tag": "section",
  "class": "spaced-section spaced-section--full-width video-about",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "default": "Video",
      "label": "heading"
    },
    {
      "type": "text",
      "id": "button_label",
      "default": "Button label",
      "label": "Button label"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button link"
    },
    {
      "type": "checkbox",
      "id": "full_width",
      "label": "Full width",
      "default": false
    }
  ],
  "blocks":[
  {
    "type": "video",
    "name": "video",
    "settings": [
    {
      "type": "html",
      "id": "iframe_video",
      "label": "Iframe video"
    },
      {
        "type": "text",
        "id": "description",
        "default": "Describe the video",
        "label": "Describe the video",
        "info": "Describe the video"
      },
      {
        "type": "html",
        "id": "html",
        "label": "html"
      },
      {
        "type": "checkbox",
        "id": "image_icon",
        "default": false,
        "label": "image_icon",
        "info": "image_icon"
      },
      {
        "type": "checkbox",
        "id": "image_padding",
        "default": false,
        "label": "image_padding",
        "info": "image_padding"
      }
    ]
  }
  ],
  "presets": [
    {
      "name": "Video loop tag"
    }
  ]
}
  {% endschema %}